<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>《{{score["title"]}}》</title>
    <link rel="stylesheet" href="{{url_for('static',filename='reset.css')}}">
    <style>
        .main {
            width: 7.5rem;
            overflow: scroll;
        }

        .main .main-chart {
            position: relative;
        }

        .main .main-logo {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: url('/static/chart_img/logo_bg.png') center repeat-y;
            background-size: contain;
            z-index: 9;
        }

        .main .main-bottom {
            z-index: 99;
            position: fixed;
            bottom: 0;
            width: 7.5rem;
            height: 1rem;
            background: #362e3c;
            padding-left: 0.3rem;
            padding-top: 0.3rem;
            font-size: 0.3rem;
        }

        .main .main-bottom .bottom-img {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 2.58rem;
            height: 0.98rem;
        }

        .main .main-bottom .bottom-download {
            padding: 0.1rem 0.4rem;
            border: 1px solid #fff;
            border-radius: 0.1rem;
            margin-left: 3.6rem;
            margin-right: 0.33rem;
            color: #fff;
        }

        .main .main-bottom .bottom-open {
            padding: 0.1rem 0.4rem;
            background: #8574f9;
            border: 0.01rem solid #8574f9;
            border-radius: 0.1rem;
            color: #fff;
        }
    </style>
    <script type="text/javascript">
        (function () {
            window.zhuge = window.zhuge || [];
            window.zhuge.methods = "_init identify track getDid getSid getKey setSuperProperty setUserProperties setPlatform".split(" ");
            window.zhuge.factory = function (b) {
                return function () {
                    var a = Array.prototype.slice.call(arguments);
                    a.unshift(b);
                    window.zhuge.push(a);
                    return window.zhuge;
                }
            };
            for (var i = 0; i < window.zhuge.methods.length; i++) {
                var key = window.zhuge.methods[i];
                window.zhuge[key] = window.zhuge.factory(key);
            }
            window.zhuge.load = function (b, x) {
                if (!document.getElementById("zhuge-js")) {
                    var a = document.createElement("script");
                    var verDate = new Date();
                    var verStr = verDate.getFullYear().toString() + verDate.getMonth().toString() + verDate.getDate().toString();

                    a.type = "text/javascript";
                    a.id = "zhuge-js";
                    a.async = !0;
                    a.src = (location.protocol == 'http:' ? "http://sdk.zhugeio.com/zhuge.min.js?v=" : 'https://zgsdk.zhugeio.com/zhuge.min.js?v=') + verStr;
                    a.onerror = function () {
                        window.zhuge.identify = window.zhuge.track = function (ename, props, callback) {
                            if (callback && Object.prototype.toString.call(callback) === '[object Function]') callback();
                        };
                    };
                    var c = document.getElementsByTagName("script")[0];
                    c.parentNode.insertBefore(a, c);
                    window.zhuge._init(b, x)
                }
            };
            var ua = window.navigator.userAgent.toLocaleLowerCase();
            var env = window.location.host.indexOf('dev') > 0 || window.location.host.indexOf('pre') > 0
            var debug = env ? true : false;
            var channel = /micromessenger/.test(ua) ? 'wechat' : /weibo/.test(ua) ? 'weibo' : 'other';
            window.zhuge.load('99944c90bdfe483ab3596e7f99f20c2e', {
                debug: debug,   // 埋点是否实时调试
                platform: { //自定义触发环境信息(选填)
                    '版本': 'v4.2'
                },
                superProperty: { //全局的事件属性(选填)
                    '应用名称': 'The ONE智能钢琴（新）'
                },
                utm: {
                    'utm_source': channel
                },
                autoTrack: true,
                //启用全埋点采集（选填，默认false）
                singlePage: false //是否是单页面应用（SPA），启用autoTrack后生效（选填，默认false）
            });
        })();
    </script>
</head>

<script>
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';
    window.onresize = function (e) {
        document.documentElement.style.fontSize = document.documentElement.offsetWidth / 7.5 + 'px';
    }
</script>

<body>
<div class="main">
    <div class="main-chart">
        <img src="{{score['score_image']}}" alt="">
        <div class="main-logo"></div>
    </div>
    <div class="main-bottom">
        <div class="bottom-img">
            <img src="{{url_for('static', filename='chart_img/logo.png')}}" alt="">
        </div>
        <a href="http://www.1tai.com/download-smartpiano.html"><span class="bottom-download">下载</span></a>
        <a href="#" id="btn"><span class="bottom-open">打开</span></a>
    </div>
</div>
<script src="/static/js/util.js"></script>
<script>
    var btn = document.querySelector('#btn')
    var ua = window.navigator.userAgent.toLocaleLowerCase()
    var isAndroid = /android/.test(ua)
    var isIOS = /ipad|iphone|ipod/.test(ua)
    var score_name = "{{score['title']}}";
    var universalLink = "{{score['app_url']}}"
    var loadApp = document.querySelector('.bottom-download')
    var channel = /micromessenger/.test(ua) ? 'wechat' : /weibo/.test(ua) ? 'weibo' : 'other';

    universalLink = formatUrl(universalLink)

    universalLink = universalLink + '&from=' + encodeURIComponent(channel) + '&from_page=' + encodeURIComponent('曲谱')

    btn.addEventListener('click', function () {
        zhuge.track('曲谱分享页-点击打开', {
            '曲集名称': score_name,
            '分享渠道': channel
        })
        window.location.href = universalLink;
    }, false)

    zhuge.track('点击分享链接', {
        '分享内容': '曲谱',
        '分享渠道': channel
    })

    loadApp.addEventListener('click', function() {
        zhuge.track('曲谱分享页-点击下载', {
            '单曲名称': score_name,
            '分享渠道': channel
        })
    }, false)
</script>
</body>

</html>